<template>
  <div class="layout-container">
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" label-width="40px" size="mini">
        <el-form-item label="状态">
          <el-radio-group v-model="searchParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select
            v-model="searchParams.channel_id"
            placeholder="请选择活动区域"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="channel in channels"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="isLoading"
            type="primary"
            @click="getArticles(1)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="article-table">
      <div slot="header">
        <span>根据筛选条件共查询 {{ total }} 条结果：</span>
      </div>
      <el-table
        :data="articleList"
        stripe
        border
        style="width: 100%"
        size="mini"
        v-loading="isLoading"
      >
        <el-table-column label="封面">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.cover.images[0]"
              fit="cover"
              lazy
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <!-- 文章状态 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除 -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="articleListStatus[scope.row.status].type">{{
              articleListStatus[scope.row.status].name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="$router.push('/publish?id='+scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="deleteArticle(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page.sync="searchParams.page"
        :page-size.sync="searchParams.per_page"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="onPageChange"
        :disabled="isLoading"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getChannels, getArticles, deleteArticle } from "@/api/article";
export default {
  name: "Layout",
  data() {
    return {
      searchParams: {
        status: null,
        channel_id: null,
        begin_pubdate: "",
        end_pubdate: "",
        page: 1,
        per_page: 10,
      },
      channels: [], // 文章频道列表
      dateRange: "", // 起始日期
      articleList: [], // 文章列表
      articleListStatus: [
        { type: "", name: "草稿" },
        { type: "warning", name: "待审核" },
        { type: "success", name: "审核通过" },
        { type: "danger", name: "审核失败" },
        { type: "info", name: "已删除" },
      ], // 文章列表状态数据
      isLoading: true, // 文章列表加载状态
      total: 0, // 文章列表总数
    };
  },
  methods: {
    // 当前页码改变时
    onPageChange(page) {
      this.searchParams.page = page;
      this.getArticles(page);
    },
    // 获取文章频道
    getChannels() {
      getChannels().then((res) => {
        this.channels = res.data.data.channels;
      });
    },
    // 获取文章列表
    getArticles(page = 2) {
      this.isLoading = true;
      this.searchParams.page = page;
      if (this.dateRange) {
        this.searchParams.begin_pubdate = this.dateRange[0];
        this.searchParams.end_pubdate = this.dateRange[0];
      } else {
        this.searchParams.begin_pubdate = null;
        this.searchParams.end_pubdate = null;
      }
      getArticles(this.searchParams).then((res) => {
        this.isLoading = false;
        this.articleList = res.data.data.results;
        this.total = res.data.data.total_count;
      });
    },
    // 删除文章
    deleteArticle(id) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteArticle(id).then((res) => {
            this.getArticles();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    // 获取文章频道
    this.getChannels();
    // 获取文章列表
    this.getArticles();
  },
};
</script>

<style lang="less" scope>
.article-table {
  margin-top: 40px;
}
.pagination {
  margin-top: 20px;
}
</style>
